<template>
  <div id="app">
    <el-dialog
      title="收货地址"
      :visible.sync="dialogTableVisible"
      v-loading="loading"
      :before-close="close"
    >
      <el-table border :data="skuList">
        <el-table-column
          label="名称"
          width="150"
          prop="skuName"
        ></el-table-column>
        <el-table-column
          label="价格"
          width="200"
          prop="price"
        ></el-table-column>
        <el-table-column label="重量" prop="weight"></el-table-column>
        <el-table-column label="默认图片">
          <template slot-scope="{ row }">
            <img
              :src="row.skuDefaultImg"
              alt=""
              style="width: 100px; height: 100px"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { getSkuList } from "@/api/product/sku";
export default {
  data() {
    return {
      dialogTableVisible: false,
      skuList: [],
      loading: true,
    };
  },
  methods: {
    async getDate(row) {
      //   发送请求
      //   console.log(row);
      let res = await getSkuList(row.id);
      console.log(res);
      if (res.code == 200) {
        this.skuList = res.data;
        // 当请求到数据了 把loading关闭
        this.loading = false;
      }
      this.dialogTableVisible = true;
    },
    // 关闭对话框的回调 done 用于关闭 Dialog
    close(done) {
      this.loading = true;
      this.skuList = [];
      done();
    },
  },
};
</script>

<style></style>
